<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>sortable</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<style type="text/css">
			ul {
				list-style: none;
				margin: 10px 5px;
				padding: 0;
				overflow: auto;
				min-height: 400px;
			}
			ul li {
				margin-bottom: 5px;
				position: relative;
			}
			ul li.transition {
				transition: width, height .5s;
				/*all 在低端安卓机上太卡，效果不好*/
				
				-webkit-transition: width, height .5s;
			}
			.img-container {
				float: left;
				margin-right: 5px;
			}
			.img-container img {
				width: 100%;
				height: 100%;
				display: block;
				box-shadow: 5px 5px 5px 0px lightgray;
				object-fit: cover;
			}
			i {
				font-style: normal;
			}
			.shakecontainer {
				height: 80px;
				width: 80px;
				padding: 10px;
				margin: 5px;
			}
			.shakefather {
				float: left;
				margin: 0;
				padding: 0;
				height: 80px;
				widows: 80px;
			}
			.shake {
				-webkit-transform-origin: center center;
				-webkit-animation-name: shake-rotate;
				-webkit-animation-duration: 0.5s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-iteration-count: infinite;
			}
			li>div.shakecontainer .img-container {
				height: 60px;
				width: 60px;
				margin-right: 0;
			}
			li>div.shakecontainer .img-container img {
				border: 1px solid #C0C0C0;
				border-radius: 6px;
			}
			li>div.shakecontainer .img-content {
				display: none;
			}
			@-webkit-keyframes shake-rotate {
				0% {
					-webkit-transform: rotate(0deg);
				}
				12.5% {
					-webkit-transform: rotate(1.25deg);
				}
				25% {
					-webkit-transform: rotate(2.5deg);
				}
				37.5% {
					-webkit-transform: rotate(1.25deg);
				}
				50% {
					-webkit-transform: rotate(0deg);
				}
				62.5% {
					-webkit-transform: rotate(-1.25deg);
				}
				75% {
					-webkit-transform: rotate(-2.5deg);
				}
				87.5% {
					-webkit-transform: rotate(-1.25deg);
				}
				100% {
					-webkit-transform: rotate(0deg);
				}
			}
			.img-remove {
				display: none;
				position: absolute;
				top: 4px;
				left: 4px;
				color: white;
				background: #101010;
				border-radius: 50%;
				font-size: 14px;
				border: 1px solid white;
				font-weight: 1000;
				height: 16px;
				width: 16px;
				line-height: 14px;
				text-align: center;
			}
			.img-index {
				position: absolute;
				left: 50%;
				top: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				font-size: 14px;
				font-weight: 1000;
				height: 16px;
				width: 16px;
				line-height: 16px;
				text-align: center;
				color: white;
				margin-left: -8px;
				margin-top: -8px;
				display: none;
			}
			li>div.shakecontainer .img-remove,
			li>div.shakecontainer .img-index {
				display: block;
			}
			ul li[draggable=true]>div {
				-webkit-animation-name: none;
			}
			ul li[draggable=true] .img-remove,
			ul li[draggable=true] .img-index {
				display: none;
			}
			.sort-handle {
				cursor: move;
				cursor: -webkit-grabbing;
			}
			.sort-ghost {
				opacity: 0;
			}
			.sort-chosen {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/preview.css" />
		<script type="text/javascript">
			function resetHeight() {
				var width = document.documentElement.clientWidth;
				var st = document.createElement('style') || document.getElementById("style_feed");
				st.id = 'style_feed';
				var height = (width - 10) * 0.5 * 0.75;
				st.innerHTML = "ul li{height:" + height + "px} .img-container{max-width:" + width * 0.5 + "px;width:" + width * 0.5 + "px;height:" + height + "px}";
				document.head.appendChild(st);
			}
			window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
				if (window.orientation === 180 || window.orientation === 0) {
					console.log('竖屏状态！');
					resetHeight();
				}
				if (window.orientation === 90 || window.orientation === -90) {
					console.log('横屏状态！');
					resetHeight();
				}
			}, false);
			resetHeight();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">sortable</h1>
			<button type="button" id="btnorder" class="mui-btn mui-btn-blue mui-pull-right mui-btn-link">排序</button>
		</header>
		<div class="mui-content">
			<ul id="ul_imgs">
				<li data-li="1">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/5.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>1</p>
						</div>
						<i class="img-index">1</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="2">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/2.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>2</p>
						</div>
						<i class="img-index">2</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="3">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/3.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>3</p>
						</div>
						<i class="img-index">3</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="4">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/4.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>4</p>
						</div>
						<i class="img-index">4</i>
						<i class="img-remove">×</i>
					</div>
				</li>
				<li data-li="5">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/5.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>5</p>
						</div>
						<i class="img-index">5</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="6">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/2.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>6</p>
						</div>
						<i class="img-index">6</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="7">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/3.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>7</p>
						</div>
						<i class="img-index">7</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
				<li data-li="8">
					<div>
						<div class="img-container drag-handle">
							<img class="item" src="../images/4.jpg" data-preview-src="" data-preview-group="1" />
						</div>
						<div class="img-content">
							<p>8</p>
						</div>
						<i class="img-index">8</i>
						<i class="img-remove ">×</i>
					</div>
				</li>
			</ul>

		</div>

	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/Sortable-edit.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script type="text/javascript">
		 //sortable:
		 //			1.git: https://github.com/RubaXa/Sortable
		 //			2.demo: http://rubaxa.github.io/Sortable/
		var sort;
		mui.init();
		var ispaixu = false;
		mui.ready(function() {
			mui.previewImage();
			document.getElementById("btnorder").addEventListener('tap', function() {
				if (!ispaixu) {
					mui("ul li").each(function() {
						this.classList.add('shakefather');
						this.firstElementChild.classList.add('shakecontainer');
						this.firstElementChild.classList.add('shake');
						//在低端安卓机上太卡 
						this.classList.add('transition');
						var _this = this;
						setTimeout(function() {
							_this.classList.remove('transition');
						}, 600);
					});
					setSortable();
					ispaixu = true;
					this.innerText = '完成';
				} else {
					ispaixu = false;
					this.innerText = '排序';
					mui("ul li").each(function() {
						this.firstElementChild.classList.remove('shakecontainer');
						this.firstElementChild.classList.remove('shake');
						this.classList.add('transition');
						this.classList.remove('shakefather');
						var _this = this;
						setTimeout(function() {
							_this.classList.remove('transition');
						}, 600);
					});
					sort && sort.destroy();
				}
			});
			[].forEach.call(document.querySelectorAll(".img-remove"), function(item, index) {
				item.addEventListener('tap', function() {
					this.parentNode.parentNode.removeChild(this.parentNode);
				});
			});
		});
		var touchtime, item_offset = {
			left: '',
			top: ''
		};

		function setSortable() {
			sort = new Sortable(document.getElementById("ul_imgs"), {
				chosenClass: 'sort-chosen',
				ghostClass: 'sort-ghost',
				scroll: true,
				//				delay:300,
				animation: 400,
				handle: '.drag-handle',
				isDropAnimation: false, //自定义属性
				onStart: function( /**Event*/ evt) { // 拖拽
					//console.log(new Date(evt.timeStamp).toLocaleString());
					//console.log(evt.oldIndex);
					touchtime = evt.timeStamp;
					item_offset.left = evt.item.offsetLeft;
					item_offset.top = evt.item.offsetTop;
					var itemEl = evt.item;
				},
				onEnd: function( /**Event*/ evt) { // 拖拽
					var itemEl = evt.item;
					//console.log(new Date(evt.timeStamp).toLocaleString());
					var timespan = evt.timeStamp - touchtime;
					//console.log(evt.timeStamp - touchtime);
					if (timespan < 200) {} else if (itemEl.offsetLeft == item_offset.left && itemEl.offsetTop == item_offset.top) {} else {
						reset_order();
						//TODO 还有一个bug未处理,重新排序后，预览图片并返回时offset位置不对，应提供方法重置previewimg
					}
					touchtime = null;
				},
			});
		};

		function reset_order() {
			//重新进行排序
			[].forEach.call(document.querySelectorAll("#ul_imgs li"), function(item, index) {
				var li = item;
				li.setAttribute('new-data-li', index + 1);
				li.querySelector('.img-index').innerText = index + 1;
			});
		};
	</script>

</html>